<template>
  <section class="setting-bg pv-12 ph-16">
    <h3>后付费电表设置</h3>
    <div style="max-width: 400px;justify-content: space-between;" class="flex-row-center">
      <div class="fc-regular">房间电表欠费自动断电</div>
      <el-switch
        v-model="noKwhOffFlag"
        inline-prompt
        :active-icon="Check"
        :active-value="'1'"
        :inactive-value="'2'"
        :inactive-icon="Close"
        @change="configChange(noKwhOffFlag, 'noKwhOffFlag')"
      />
    </div>
    <div style="max-width: 400px;justify-content: space-between;" class="flex-row-center">
      <div class="fc-regular">房间电表缴费自动通电</div>
      <el-switch
        v-model="rechargeKwhOnFlag"
        inline-prompt
        :active-icon="Check"
        :active-value="'1'"
        :inactive-value="'2'"
        :inactive-icon="Close"
        @change="configChange(rechargeKwhOnFlag, 'rechargeKwhOnFlag')"
      />
    </div>
    <div style="max-width: 400px;justify-content: space-between;" class="flex-row-center">
      <div class="fc-regular">房间电表退房自动断电</div>
      <el-switch
        v-model="checkOutOffFlag"
        inline-prompt
        :active-icon="Check"
        :active-value="'1'"
        :inactive-value="'2'"
        :inactive-icon="Close"
        @change="configChange(checkOutOffFlag, 'checkOutOffFlag')"
      />
    </div>
    <div style="max-width: 400px;justify-content: space-between;" class="flex-row-center">
      <div class="fc-regular">房间电表入住自动通电</div>
      <el-switch
        v-model="checkInOnFlag"
        inline-prompt
        :active-icon="Check"
        :active-value="'1'"
        :inactive-value="'2'"
        :inactive-icon="Close"
        @change="configChange(checkInOnFlag, 'checkInOnFlag')"
      />
    </div>
  </section>
</template>
<script setup name="AfterPaidElectrictable">
import { Check, Close, Remove } from '@element-plus/icons-vue'
import { getInfo as getConfig, edit } from '@/api/setting/waterElectricity'

const { proxy } = getCurrentInstance()

const noKwhOffFlag = ref('1')
const rechargeKwhOnFlag = ref('1')
const checkOutOffFlag = ref('1')
const checkInOnFlag = ref('1')

const configId = ref('')

function getInfo() {
  getConfig().then(res => {
    const data = res.data
    noKwhOffFlag.value = data.noKwhOffFlag
    rechargeKwhOnFlag.value = data.rechargeKwhOnFlag
    checkOutOffFlag.value = data.checkOutOffFlag
    checkInOnFlag.value = data.checkInOnFlag
    configId.value = data.waterElectricityConfigId
  })
}

function configChange(val, key) {
  const params = {}
  if (key === 'noKwhOffFlag') {
    params.noKwhOffFlag = val
  } else if (key === 'rechargeKwhOnFlag') {
    params.rechargeKwhOnFlag = val
  } else if (key === 'checkOutOffFlag') {
    params.checkOutOffFlag = val
  } else if (key === 'checkInOnFlag') {
    params.checkInOnFlag = val
  }
  if (configId.value !== '') {
    params.waterElectricityConfigId = configId.value
  }
  edit(params).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('保存成功')

      getInfo()
    }
  })
}

getInfo()
</script>
